<template>
  <div class="cateList">
    <div class="hdWraper">
      <van-search
        v-model="value"
        placeholder="搜索商品,输入关键字"
        input-align="center"
         @click="$router.push('/search')"
      />
    </div>
    <div class="cateContainer" style="height:700px">
      <!-- 左侧导航分类 -->
      <div class="cateNavVertWrap">
        <ul class="cateNavVert">
          <li  class="item" :class="{active:cateItemId===item.id}" v-for="item in cateList" :key="item.id"  @click="changeCate(item.id)">{{item.name}}</li>
        </ul>
      </div>
      <!-- 右侧内容 -->
      <div class="subCateList">
        <div class="banner">
          <img :src="picUrl"/>
        </div>
        <div class="cateList" v-for="item in cateChildren.categoryGroupList" :key="item.id">
          <div class="hd" v-if="item.name">{{item.name}}</div>
          <div class="list" v-for="child in item.categoryList" :key="child.id">
            <div class="itemImg" @click="toSubCateList(child)">
              <img :src="child.wapBannerUrl"/>
              <div>{{child.name}}</div>
              </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {reqCateList,getCateList} from '@/api'
export default {
  name: "category",
  data(){
    return{
      cateList:[],
      cateItemId:'' ,// id标识
      cateChildren:{},
      value:'',
      picUrl:'',
    }
  },
  mounted(){
    this.getCateList()
    this.changeCate(this.cateItemId)
  },
  methods:{
    async getCateList(){
      const result=await reqCateList()
				// 导航列表数据
			this.cateList=result.data.categoryL1List|| [];
      this.cateItemId=this.cateList[0].id
    },
    async changeCate(id){
      this.cateItemId=id
      const result = await getCateList(id)
      this.cateChildren = result.data || {};
      this.picUrl = result.data.currentCategory.bannerList[0].picUrl
    },
    toSubCateList(child){
      this.$router.push({
        path:'/SubCateList',
        query:{
          categoryId: child.superCategoryId,
          subCategoryId: child.id,
          categoryType: child.categoryType,
        }
      })
    }
  },
  computed: {
    
	}
};
</script>

<style lang="less" scoped>
.cateList {
  position: relative;
  
  .hdWraper {
    width: 100%;
    height: 1.17333rem;
    padding: 0 0.4rem;
    box-sizing: border-box;
    background-color: #fff;
  }
  .cateContainer {
    width: 100%;
    border: 1px solid #999;
    border-left: none;
    overflow: auto;
    .cateNavVertWrap {
      // position: fixed;
      // left: 0;
      float: left;
      width: 80px;
      height: 100%;
      .cateNavVert {
        position: fixed;
        width: 80px;
        height: 100%;
        border-right: 1px solid #999;
        .item {
          display: block;
          margin: 15px 0;
          width: 100%;
          height: 24px;
          line-height: 24px;
          text-align: center;
          font-size: 14px;
          position: relative;
          &.active::after {
            position: absolute;
            content: "";
            top: 0px;
            left: 0px;
            width: 1px;
            height: 24px;
            color: red;
            border-left: 5px solid red;
          }
        }
      }
    }
    .subCateList {
      padding: 0.3rem 0.3rem 0.21rem;
      overflow: hidden;
      .banner {
        width: 270px;
        height: 120px;
        text-align: center;
        margin-bottom: 20px;
        background: #eee no-repeat 50%;
        background-size: cover;
        border-radius: 4px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .cateList {
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;

        .hd{
          text-align: left;
          overflow: hidden;
          width: 100%;
          text-align: left;
          font-size: 14px;
          padding-bottom: 4px;
          border-bottom: 1px solid #d9d9d9;
          color: #333;
          font-weight: 700;
          font-family: PingFangSC-Light, helvetica, Heiti SC;
        }
        
        .list {
          width: 75px;
          height: 100px;
          margin:5px 5px;
          // display: inline-block;
          // // margin-right:10px ;
          // display: flex;
          img{
           width: 100%;
            height: 100%;
            align-items: center;
            // align-content: center;
          }
          div{
            font-size: 12px;
            text-align: center;
            margin-bottom: 20px;
          }
        }
      }
    }
  }
}
</style>